import {Component, Input, OnInit} from '@angular/core';
import {ActivatedRoute} from '@angular/router';
import {ApiService} from '@core/services/http/api.service';
import {Events} from '@core/services/events/Events';
import {ApesMessageService} from "@shared/apes/message";

@Component({
  selector: 'vehicle-info',
  template: `
    <!-- 头部 -->
    <div>
      <div *ngFor="let head of topList">
        <!-- 车牌，车架号 -->
        <div class="car-sp">
          <span *ngFor="let i of head.carTop">
            <i>{{ carTop[i['feild']] }}</i>
            <i *ngIf=" i.lable === '车牌号'">&nbsp; / &nbsp;</i>
          </span>
        </div>
        <!-- 车型，配置 -->
        <div class="car-con">
          <span *ngFor="let a of head.carCont">
            <i>{{ carCont[a['feild']] }}</i>
            <i *ngIf=" a.lable === '厂牌名称'">&nbsp;/&nbsp;</i>
            <i *ngIf="a.lable === '车型名称'">&nbsp;/&nbsp;</i>
          </span>
        </div>

        <apes-divider apesText="保 养" apesOrientation="left" style="font-size: 16px"></apes-divider>
        <div apes-row apesGutter="10" apesSpan="1">
          <div apes-col apesSpan="12" *ngFor="let i of head.maintain" >
            <span class="cont-span">{{ i.lable }}：</span>
            <span class="cont-input">{{ maintain[i['feild']] }}</span>
          </div>
        </div>

        <apes-divider apesText="消费记录" apesOrientation="left" style="font-size: 16px"></apes-divider>
        <div apes-row apesGutter="10" apesSpan="1">
          <div apes-col apesSpan="12" *ngFor="let i of head.paly" >
            <span class="cont-span">{{ i.lable }}：</span>
            <span class="cont-input">{{ paly[i['feild']] }}</span>
          </div>
        </div>

        <apes-divider apesText="车辆参数" apesOrientation="left" style="font-size: 16px"></apes-divider>
        <div apes-row apesGutter="10" apesSpan="1">
          <div apes-col apesSpan="12" *ngFor="let i of head.carIofo" >
            <span class="cont-span">{{ i.lable }}：</span>
            <span class="cont-input">{{ carIofo[i['feild']] }}</span>
          </div>
        </div>
        
      </div>
    </div>

  `,
  styleUrls: ['../car-list.component.scss']
})
export class VehicleInfoComponent implements OnInit {
  @Input()
  set parmes(value: any) {
    this._parmes = value;
  }
  get parmes() {
    return this._parmes;
  }

  _parmes: any;

  carTop = {};
  carCont = {};
  maintain = {};
  paly = {};
  carIofo = {};
  topList: any [];

  constructor(private routeInfo: ActivatedRoute,
              private event: Events,
              private apiService: ApiService,
              private msg: ApesMessageService) {

  }

  ngOnInit() {
    let jjcdh = this.parmes.JJCDH;
    let cphm = this.parmes.CPHM;
    let mdid = this.parmes.MDID;
    this.topList = this.setHeadData();
    this.getHeadData(jjcdh,cphm, mdid);

  }

  getHeadData(api: any, cphm?: any, mdid?: any) {
    let data = {'interfaceMethod': 'ipmCLZKForAppService.getVIPCLXX', 'pdata': {'JJCDH': api, 'CPHM': cphm,  'MDID': mdid}};
    this.apiService.post('report.interface', {'body': JSON.stringify(data)}).subscribe(
      (resultData) => {
        const result = JSON.parse(resultData);
        if (result.success) {
          if (result.obj.length !== 0) {
            let data = JSON.parse(result.obj);
            // this.titleData = data;
            this.carTop = data;
            this.carCont = data;
            this.maintain = data;
            this.paly = data;
            this.carIofo = data;
          }
        } else {
          this.msg.info(result.msg);
        }
      });
  }

  // 脑袋数据
  setHeadData() {
    return [
      {
        carTop: [
          {lable: '车牌号', feild: 'CPHM'},
          {lable: '车架号码', feild: 'CJHM'},
        ],
        carCont: [
          {lable: '厂牌名称', feild: 'QCCPMC'},
          {lable: '车型名称', feild: 'CHXMC'},
          {lable: '配置车型名称', feild: 'PZCXMC'},
        ],
        maintain: [
          {lable: '商业险投保日期止', feild: 'SYXTBRQZ'},
          {lable: '预计下次保养日期', feild: 'XCBYRQ'},
          {lable: '交强险投保日期止', feild: 'JQXTBRQZ'},
          {lable: '预计下次保养里程', feild: 'XCBYLC'},
          {lable: '上次保养日期', feild: 'SCBYRQ'},
          {lable: '年审日期止', feild: 'NSRQ'},
          {lable: '上次保养里程', feild: 'SCBYLC'},
        ],
        paly: [
          {lable: '来店次数', feild: 'LDCS'},
          {lable: '已行驶里程', feild: 'YXSLC'},
          {lable: '上次来店日期', feild: 'SCLDRQ'},
        ],
        carIofo: [
          {lable: '发动机型号', feild: 'FDJXH'},
          {lable: '车辆服务等级', feild: 'CLFWDJMC'},
          {lable: '发动机号码', feild: 'FDJHM'},
          {lable: '机油规格', feild: 'JYGG'},
          {lable: '变速器描述', feild: 'BSQMS'},
          {lable: '基础油类型', feild: 'JCYLX'},
          {lable: '发动机启停技术', feild: 'FDJQTJS'},
          {lable: '排量', feild: 'FDJPL'},
          {lable: '驱动方式', feild: 'QDFS'},
          {lable: '生产年份', feild: 'SCNF'},
          {lable: '核定载人数', feild: 'HDZRS'},
        ]
      }
    ]

  }

  // 截取 月、日、时、分、秒
  timesMDHMS(key:string ) {
    if( key !== undefined ){
      key = key.slice(0, 10);
    }
    return key;
  }

}
